<template>
    <div class="wrapper" >
        <div class="status-bar" style="background-color:#fafafa;" :style="{'height': statusHeight}"></div>
        <home-header :fun="filterCase"></home-header>
        <list class="home_content">
            <refresh  @pullingdown="loadingDown" :display="refreshing ? 'show' : 'hide'"></refresh>
            <cell>
                <slider class="slider" interval="8000" auto-play="true">
                    <div v-for="img in bannerList" v-if="img.pic">
                        <image class="content_first_img" resize="contain" :src="img.pic"></image>
                        <wxc-noticebar class="content_noticebar"  :notice="img.content" ></wxc-noticebar>
                    </div>
                </slider>

                <div class="content_middle">
                    <div class="content_middle_div" @click="sellcar()">
                        <text class="iconfontStyle iconfont">&#xe61a;</text>
                        <text class="content_middle_text">卖车</text>
                    </div>
                    <div class="content_middle_div" @click="cantuse">
                        <text class="iconfontStyle iconfont">&#xe62c;</text>
                        <text class="content_middle_text">评估</text>
                    </div>
                    <div class="content_middle_div" @click="carMore">
                        <text class="iconfontStyle iconfont">&#xe606;</text>
                        <text class="content_middle_text">买车</text>
                    </div>
                </div>
                <div v-if="activeList.length>0">
                <text class="home_huodong">活动专区</text>
                <slider class="scroller">
                    <div class="list_cell" v-for="(item, index) in activeList">
                        <div class="list_content" @click="carDetail(item.pId)">
                            <image class="list_content_img" v-if="item.headImg" :src="item.headImg"></image>
                            <image class="list_content_img" v-else src="bmlocal://assets/acw/car.jpg"></image>
                            <div>
                                <text class="list_content_first">{{item.pName}}</text>
                                <div class="list_content_third">
                                    <text class="list_content_third_price">{{item.pPrice}}万元</text>
                                    <!--<WxcButton @wxcButtonClicked="bargain(item.pId)" class="content_four_share" type="white" size="medium" text="邀请好友砍价"></WxcButton>-->
                                </div>
                                <div class="list_content_two">
                                    <text class="list_content_two1">{{item.pYear}}年</text>
                                    <text class="list_content_two2">{{item.pKilometre}}万公里</text>
                                    <text class="list_content_two1">{{item.p1}}</text>
                                </div>
                            </div>
                        </div>
                        <div class="list_content_button">
                            <WxcButton @wxcButtonClicked="openBottomPopup(item)" class="wxc_button_third" type="white" size="medium" text="排行榜"></WxcButton>
                            <WxcButton @wxcButtonClicked="bargainHandle(item.pId)" class="wxc_button_third" type="white" size="medium" text="砍价"></WxcButton>
                            <WxcButton @wxcButtonClicked="createdOrder(item)" class="wxc_button_third" type="white" size="medium" text="购买"></WxcButton>
                        </div>
                        <div class="right_left">
                            <text class="iconfont right_icon">&#xe63a;</text>
                            <text class="iconfont left_icon">&#xe638;</text>
                        </div>
                    </div>
                </slider >
                </div>
                <!--<div class="home_car_market">-->
                    <!--<text class="car_market_text" @click="buyCar(1)">个人车源</text>-->
                    <!--<text class="car_market_text" @click="buyCar(0)">优质商家</text>-->
                <!--</div>-->
            </cell>
            <cell class="border-cell"></cell>
            <cell>
                <div>
                    <am-tabs v-model="selected" :tabs="['全部', '推荐', '个人车源','优质商家']" @change="changeTab"/>
                </div>
            </cell>
            <cell v-for="(demo,key) in carSearchList">
                <div class="content"  @click="carDetail(demo.pId)">
                    <image class="content_img" v-if="demo.headImg" :src="demo.headImg"></image>
                    <image class="content_img" v-else src="bmlocal://assets/acw/car.jpg"></image>
                    <div>
                        <text class="content_first">{{demo.pAllname}}</text>
                        <div class="content_third">
                            <text class="content_third_price">{{demo.pPrice+"万元"}}</text>
                            <text class="content_third_price">{{"首付"+Math.ceil((demo.pPrice)*0.07)+"万元"}}</text>  <!--首付款7%-->
                        </div>
                        <div class="content_two">
                            <text class="content_two1">{{demo.pYear}}年</text>
                            <text class="content_two2">{{demo.pKilometre}}万公里</text>
                            <text class="content_two1">{{demo.p1}}</text>
                        </div>
                        <div class="content_four">
                            <text class="content_four_text" v-if="demo.selltype!= 1 ">3天无理由</text>
                            <text class="content_four_text">{{demo.selltype!= 1 ? '2万公里质保': '可领取2万公里质保'}}</text>
                            <text class="content_four_text" @click="callPhone(demo.pTel)">{{demo.selltype != 1 ? '联系商家': '联系车主'}}</text>
                        </div>
                    </div>
                </div>
            </cell>
            <cell>
                <div class="morecarWrap">
                    <div class='morecar' @click="carMore">
                        <text class='morecartxt'>查看更多车源</text>
                    </div>
                </div>
            </cell>

        </list>

        <wxc-popup :show="isBottomShow"
                   @wxcPopupOverlayClicked="popupOverlayBottomClick"
                   pos="top"
                   height="1000">
            <scroller>
            <div class="demo-content">
                    <div class="rule_content">
                        <text class="bargain_list">砍价排行榜</text>
                        <text class="rule_content_word">砍价规则：</text>
                        <text class="rule_content_word">1、砍价活动每7天推出三辆，活动周期1个月</text>
                        <text class="rule_content_word">2、砍价抢车成功用户7个工作日内提车（如有变动另行通知）</text>
                        <text class="rule_content_word">3、车辆运输费用及购置税由用户承担</text>
                        <text class="rule_content_word">4、每个新注册用户只能砍价一次。</text>
                        <text class="rule_content_word">5、砍价没有上限，砍价车辆以交付定金为成交依据</text>
                        <text class="rule_content_word">6、抢车成功用户15个工作日内没有提车视为放弃购买（因厂家原因除外）</text>
                        <text class="rule_content_word">7、活动最终解释权归添美商务管理有限公司</text>
                    </div>
                    <div v-if="bargainObj.bargainList.length>0"  v-for="bargain in bargainObj.bargainList">
                        <div class="bargain_num2">
                                <div  class="bargain_num">
                                    <text >用户：{{bargain.userPhone}}</text>
                                    <text class="userSelf" v-if="userId == bargain.uid">（小主）</text>
                                </div>
                                <div class="bargain_num">
                                    <text class="bargain_num1">已砍￥{{parseFloat(bargain.bargainPrice * 10000).toFixed(0)}}</text>
                                    <text class="bargain_num1">还可砍￥{{(parseFloat(bargainObj.bargainTotal-bargain.bargainPrice) * 10000).toFixed(0)}}</text>
                                    <text class="bargain_num1">{{bargain.bargainCount}}人砍</text>
                                </div>
                        </div>
                    </div>
                    <div v-else>暂无砍价列表</div>
            </div>
            </scroller>
        </wxc-popup>
        <div class="order_pop" v-if="payPopShow">
            <text class="order_pop_title">订单信息</text>
            <div class="order_pop_content">
                <text class="order_pop_text1">订单编号：</text>
                <text class="order_pop_text2">{{order.orderId}}</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">车主：</text>
                <text class="order_pop_text2">{{order.name}}</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">价格：</text>
                <text class="order_pop_text2">{{order.price}}万元</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">优惠：</text>
                <text class="order_pop_text2">{{order.offer}}万元</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">实际价格：</text>
                <text class="order_pop_text2">{{order.pay}}万元</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">订金：</text>
                <text class="order_pop_text2">{{order.realpay}}元</text>
            </div>
            <!-- <div class="order_pop_content">
                <text class="order_pop_text1">保证金：</text>
                <text class="order_pop_text2">{{order.p10}}万元</text>
            </div> -->
            <!--<div class="order_pop_content">-->
                <!--<text class="order_pop_text1">看车地点：</text>-->
                <!--<text class="order_pop_text2">{{order.address}}</text>-->
            <!--</div>-->
            <div class="order_pop_button">
                <text class="order_pop_cencel" @click="cancel">取消</text>
                <text class="order_pop_pay" @click="payOrder(order)">支付</text>
            </div>
        </div>
        <div ref="ball" class="ball" @touchstart="onPanStart" @click="callPhone('4000475000')">
            <!-- <text class="iconfontStyle1 iconfont">&#xe633;</text> -->
            <image class="ball_img" src="bmlocal://assets/acw/ball.jpg"></image>
        </div>
    </div>
</template>
<script>
import { WxcButton, WxcProgress, WxcTabPage, WxcPanItem, WxcPopup, wxcNoticebar } from 'weex-ui';
import util from '../utils/util';
import Binding from 'weex-bindingx';
const dom = weex.requireModule('dom')
var bmWXPay = weex.requireModule('bmWXPay')
// bmWXPay.initWX('wxb41ad58cf1f362f9')
bmWXPay.initWX('wxf4cc61d23f1c0461')
const animation = weex.requireModule('animation')
var wxamapnav = weex.requireModule('wxamapnav')
import header from './header';
import { AmTabs } from 'weex-amui'
export default {
    components: {
        WxcButton, WxcProgress, WxcTabPage, WxcPanItem, WxcPopup, wxcNoticebar,
        'home-header': header,
        AmTabs
    },
    data () {
        return {
            isBottomShow: false,
            x: 0,
            y: 0,
            isInAnimation: false,
            gesToken: 0,
            selected: 0,//底部列表tab选择
            token: '',
            statusHeight: Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40),
            activeList: [],
            userId: '',
            searchParam: {
                p_brand: '',
                sellType: '',
                p_year: '',
                price: '',
                p_color: '',
                age: '',
                gas: '',
                p_model: '',
                name: '',
                isrecom: 0, // 推荐豪车 是1 否 0
                page: 1,
                limit: 5,
                sort: 'p_id',
                order: 'asc',
            },
            bannerList: [],
            brandList: [],
            selectBrand: '',
            payPopShow: false,
            order: {
                orderId: '',
                name: '',
                price: '',
                offer: '',
                pay: '',
                realPay: '',
                address: '',
            },
            carSearchParam:{
                '0':{//全部

                },
                '1':{
                   isrecom: 1,//推荐
                },
                '2':{
                    sellType:1//个人
                },
                '3':{
                    sellType: 2//优质商家 0 后台平台商家   1 代表个人   2优质商家
                }
            },
            a:1,
            carSearchList:[],
            bargainObj: {},
            refreshing: true,
        }
    },
    eros: {
        beforeBackAppear(params) {
            this.searchParam.p_brand = params.p_brand
            // this.searchParam.p_color = params.p_color
            this.searchParam.price = params.price
            this.searchParam.age = params.age
            this.searchParam.gas = params.gas
            this.searchParam.p_model = params.p_model
            this.searchParam.isrecom = 0
            this.getCarList(this.carSearchParam['0'])
        }
    },
    created () {
        let user = this.$storage.getSync('UserInfo')
        if (user) {
            this.userId = user.id
        }
        // var result = this.$storage.getSync('LoginStatus');
        // if(result != 'true'){
        //     this.getLoginStatus();
        // }
        util.initIconFont()
        this.getBargainCarList({
            "page": 1,
            "limit": 10,
            "sort": 'p_id',
            "order": 'asc'
        })
        // this.searchParam.isrecom = 1;
        let vm = this;

        this.getCarList(vm.carSearchParam['0'])
        this.getBannerList()
    },
    methods: {
        openBottomPopup (item) {
            console.log("yk::::::::::::::::::::::: -- " + JSON.stringify(item))
            this.bargainObj = item
            console.log("shuoyi::::::::::::::::::::::: -- "+ this.bargainObj.bargainList.length)
            this.isBottomShow = true;
        },
        //非状态组件，需要在这里关闭
        popupOverlayBottomClick () {
            this.isBottomShow = false;
        },
        bindingtest() {
            var result = BindingX.bind({
                    eventType: 'pan',       // 事件类型
                    anchor: 'foo',         // anchor指的是事件的触发者，如果是eventType是"orientation"或"timing",则不用填
                    props: [
                        {
                            element: view.ref,   // 要改变的视图的引用或者id
                            expression: "1-x/100", //表达式
                            property: "opacity"    //要改变的属性
                        }
                    ]
                })
        },

        changeTab (index, value) {
            // this.$notice.toast({
            //     message: `index:${index},value:${value}`
            // })
            let vm = this;
            // this.$notice.toast({
            //     message: vm.carSearchParam[index]
            // })
            this.getCarList(vm.carSearchParam[index])
        },
        filterCase(city, county, timeB, keyword) {
            this.pageNum = 1;
            this.curCity = city;
            this.curCounty = county;
            this.curTimeBetween = timeB;
            this.searchword = keyword;
        },
        // 提示
        cantuse () {
            this.$notice.toast({ message: "开发中，敬请期待..."})
        },
        callPhone (phone) {
            // this.$notice.toast({ message: "呼喊电话"})
            // wxamapnav.call('10086')
            this.$coms.call(phone)
            // this.$coms.call(phone)
        },
        // 滑动事件
        swipePop (e) {
            if (e.direction == 'left') {
                this.hide()
            }
        },
        loadingDown() {
            // this.pageNums[index] = 1;
            // this.getSpecOrderList(index, 1);
            this.getCarList(this.carSearchParam['0'])

        },
        onloading(index) {
            this.pageNums[index] = 1;
            this.getSpecOrderList(index, 1);
        },
        getLoginStatus () {
            this.$storage.setSync('LoginStatus', 'false')
            this.$storage.setSync('UserInfo', {})
            this.$router.open({
                name: 'acw.home.login',
                type: 'PUSH',
                canBack: false,
            })
        },
        bargainHandle (id) {
            this.$router.open({
                name: 'acw.buycar.bargain',
                type: 'PUSH',
                params: {carId: id}
            });
        },
        // 买车
        buyCar (type) {
            this.$router.open({
                name: 'acw.buycar.buycar',
                type: 'PUSH',
                params: {sellType: type}
            });
        },
        // 汽车详情
        carDetail (id) {
            this.$router.open({
                name: 'acw.buycar.cardetail',
                type: 'PUSH',
                params: {carId: id}
            });
        },
        // 车辆信息录入
        sellcar () {
            this.$router.open({
                name: 'acw.sellcar.sellcar',
                type: 'PUSH'
            });
        },
        // 分期购
        installment () {
            this.$router.open({
                name: 'acw.installment.installment',
                type: 'PUSH'
            });
        },
        // 查询可砍价车辆列表
        getBargainCarList (param) {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'bargain.getBargainCar', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: param
            }).then(resData => {
                // 成功回调
                if(resData && resData.errno == 0){
                    let list = this.getCarPic(resData.data)
                    for (let i = 0, len = list.length; i < len; i++) {
                        this.getBargainList({
                            car_id: list[i].pId,
                            page: 1,
                            limit: 100,
                            sort: 'id',
                            order: 'asc'
                        }, (res, bprice) => {
                            list[i].bargainList = res
                            list[i].bargainPrice = bprice
                            this.activeList.push(list[i])
                        })
                    }
                }
            }, error => {
                // 错误回调
            })
        },
        // 查询砍价排行列表
        getBargainList (param, callback) {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'bargain.bargainListByCarId', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: param
            }).then(resData => {
                console.log("yk")
                // 成功回调
                if(resData && resData.errno == 0){
                    let bprice = 0
                    let list = resData.data.items
                    for (let i = 0, len = list.length; i < len; i++) {
                        if (this.userId == list[i].uid) {
                            bprice = list[i].bargainPrice
                        }

                        if (list[i].userPhone) {
                            list[i].userPhone = list[i].userPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
                        }
                    }
                    callback(list, bprice)
                }
            }, error => {
                // 错误回调
            })
        },
        // 查询车辆列表
        getCarList (param) {
            param.page = 1;
            param.limit = 10;
            param.sort ='p_id';
            param.order ='desc';
            let vm = this;
            this.$fetch({
                method: 'POST',    // 大写
                name: 'cars.searchCar', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: param
            }).then(resData => {
                // 成功回调
                if(resData && resData.errno == 0){
                    let list = this.getCarPic(resData.data.items)
                    vm.carSearchList = list;
                }
                this.refreshing = true
            }, error => {
                // 错误回调
            })
        },
        // 汽车图片
        getCarPic (list) {
            for (let i = 0, len = list.length; i < len; i++) {
                list[i].headImg = list[i].pPics.split(';')[1]
            }
            return list
        },
        // 查询轮播图
        getBannerList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'banner.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    "position":1,
                    "page": 1,
                    "limit": 5,
                    "sort": 'add_time',
                    "order": 'desc'

                }
            }).then(resData => {
                // 成功回调
                if(resData && resData.errno == 0){
                    this.bannerList = resData.data.items
                }
            }, error => {
                // 错误回调
                console.log(error)
            })
        },
        // 封装数据
        dataPack (dataList, name) {
            for (let i = 0, length = dataList.length; i < length; i++) {
                dataList[i].name = dataList[i][name]
            }
            return dataList
        },
        // 取消订单
        cancel () {
            this.payPopShow = false;
            this.order = {
                orderId: '',
                name: '',
                price: '',
                offer: '',
                pay: '',
                realPay: '',
                address: '',
            }
        },
        // 支付
        payOrder (order) {
            // this.payPopShow = false;
            this.payPopShow = false;
            this.getPreOrderInfo({
                'orderId': order.orderId,
                'amount': order.realpay
            })
        },
        // 下单
        createdOrder (car) {
            var userInfo = this.$storage.getSync('UserInfo');
            let param = {
                "actual_amount": car.pPrice - car.bargainPrice,
                "address": car.lookcaradd,
                "car_id": car.pId,
                "city": car.lookcaradd,
                "county": car.cid,
                "description": car.pDetails,
                "discount": car.bargainPrice,
                "mobile": car.pTel,
                "order_type": car.selltype,
                "orginal_amount": car.pPrice,
                "province": car.lookcaradd,
                "username": car.pUsername
            }
            this.order = {
                name: car.pUsername,
                price: car.pPrice,
                offer: car.bargainPrice,
                pay: car.pPrice - car.bargainPrice,
                address: car.lookcaradd,
            }
            this.token = userInfo.token;
            this.$fetch({
                method: 'POST',    // 大写
                name: 'order.add', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: param,
                header: {
                    'X-TMACW-APP-Token': this.token
                }
            }).then(resData => {
                const vm = this;
                // 成功回调
                if(resData && resData.errno == 0) {
                    this.order.orderId = resData.data.orderId;
                    this.order.realpay = parseFloat(car.pPrice * (Number(car.p10) / 100) * 10000).toFixed(2),

                    this.payPopShow = true;
                } else {
                    this.$notice.toast({ message: resData.errmsg})
                }
            }, error => {
                // 错误回调
                this.$notice.toast({ message: "获取订单失败, 请重试"})
            })
        },
        getPreOrderInfo(param) {
            const vm = this;
            var result = bmWXPay.isInstallWXApp();

            if(!result) {
                this.$notice.toast({ message: "请先安装微信客户端！"})
                return;
            }

            var userInfo = this.$storage.getSync('UserInfo');
            this.token = userInfo.token;
            this.$fetch({
                method: 'POST',    // 大写
                name: 'pay.pay', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: param,
                header: {
                    'X-TMACW-APP-Token': this.token
                }
            }).then(resData => {

                // 成功回调
                if(resData && resData.errno == 0) {
                    // this.infoObj = resData.data.worker;
                    // var result = bmWXPay.isInstallWXApp()

                    var payId = resData.data.prepayId;

                    bmWXPay.pay({
                        // 微信支付所需必要参数
                        appid:resData.data.appId,
                        sign:resData.data.sign,
                        timestamp:resData.data.timeStamp,
                        noncestr:resData.data.nonceStr,
                        partnerid:resData.data.partnerId,
                        prepayid:resData.data.prepayId,
                        packageValue:resData.data.packageValue
                    },function(resData){
                        //   {"resCode":-2,"status":-2}__LOG
                        if(resData && resData.status == 0){
                            // vm.getPayStatus(payId);
                            vm.$notice.toast({ message: "支付成功"})
                        } else if (resData.status == -1) {
                            vm.$notice.toast({ message: "普通错误类型"})
                        } else if (resData.status == -2) {
                            vm.$notice.toast({ message: "您点击了取消或返回"})
                        } else if (resData.status == -3) {
                            vm.$notice.toast({ message: "发送失败"})
                        } else if (resData.status == -4) {
                            vm.$notice.toast({ message: "授权失败"})
                        } else if (resData.status == -5) {
                            vm.$notice.toast({ message: "微信不支持"})
                        } else {
                            vm.$notice.toast({ message: "失败，请重试"})
                        }

                        // 支付结果
                        // resDate.status 说明
                        // 0,   /**< 成功    */
                        // -1,   /**< 普通错误类型    */
                        // -2,   /**< 用户点击取消并返回    */
                        // -3,   /**< 发送失败    */
                        // -4,   /**< 授权失败    */
                        // -5,   /**< 微信不支持    */
                    })
                } else {
                    this.$notice.toast({ message: resData.errmsg})
                }
            }, error => {
                // 错误回调
                this.$notice.toast({ message: "获取订单失败, 请重试"})
            })
        },
        carMore(){
            //更多车辆
            this.$router.open({
                name: 'acw.buycar.buycar',
                type: 'PUSH',
                params: {sellType: ''}
            });
        },
    //    浮标
        getEl: function(e) {
            return e.ref;
        },
        onPanStart: function(e) {
            if (this.isInAnimation === true) {
                if (this.gesToken != 0) {
                    Binding.unbind({
                        eventType: 'pan',
                        token: this.gesToken
                    })
                    this.gesToken = 0;
                }
                return
            }
            var my = this.getEl(this.$refs.ball);
            var expression_x_origin = `x+${this.x}`;
            var expression_y_origin = `y+${this.y}`;
            var gesTokenObj = Binding.bind({
                anchor: my,
                eventType: 'pan',
                props: [{
                    element: my,
                    property: 'transform.translateX',
                    expression: expression_x_origin
                },
                    {
                        element: my,
                        property: 'transform.translateY',
                        expression: expression_y_origin
                    }
                ]
            }, (e) => {
                if (e.state === 'end') {
                    this.x += e.deltaX;
                    this.y += e.deltaY;
                    //anim
                    // this.bindTiming();
                }
            })
            this.gesToken = gesTokenObj.token;
        },
        bindTiming: function() {
            this.isInAnimation = true;
            var my = this.getEl(this.$refs.ball);
            //should equal with timing duration
            var exit_origin = "t>1000";
            var changed_x;
            var final_x;
            var final_y;
            if (this.x > (750 - 50 * 2) / 2) { //right
                changed_x = 550 - this.x;
                final_x = 550;
            } else {
                changed_x = 0 - this.x;
                final_x = 0;
            }
            var totalHeight = 1000;
            var changed_y;
            if (this.y > totalHeight / 2) {
                changed_y = totalHeight - 200 - this.y;
                final_y = totalHeight - 200;
            } else {
                changed_y = 0 - this.y;
                final_y = 0;
            }
            var expression_x = `easeOutElastic(t,${this.x},${changed_x},1000)`;
            var expression_y = `easeOutElastic(t,${this.y},${changed_y},1000)`;
            var result = Binding.bind({
                eventType: 'timing',
                exitExpression: exit_origin,
                props: [{
                    element: my,
                    property: 'transform.translateX',
                    expression: expression_x
                },
                    {
                        element: my,
                        property: 'transform.translateY',
                        expression: expression_y
                    }
                ]
            }, (e) => {
                if (e.state === 'end' ||
                    e.state === 'exit') {
                    // reset x & y
                    this.x = final_x;
                    this.y = final_y;
                    this.isInAnimation = false;
                }
            })
        },
    }
}
</script>
<style>
.iconfont {
    font-family: iconfont;
}
.iconfontStyle {
    font-size: 80px;
    color: #1E90FF;
}
.wrapper{
    background-color: #fff;
}
.status-bar{
    width: 750px;
    height: 40px;
    background-color: #fff;
}
.home_content{
    /* height: 2334px; */
    width: 750px;
}
.slider{
    height: 400px;
    background-color: #fff;
}
.content_first_img{
    height: 400px;
}
.content_noticebar{
    height: 60px;
}
.content_middle{
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    height: 160px;
}
.content_middle_div{
    align-items: center;
}
.content_middle_img{
    height: 50px;
    width: 60px;
}
.content_middle_text{
    font-size: 30px;
    color: #666;
}
.home_huodong{
    text-align: center;
    background-color: #1E90FF;
    color: #fff;
    font-size: 36px;
    height: 100px;
    line-height: 100px;
}
.scroller{
    flex-direction: row;
    height: 350px;
    position: relative;
}
.list_cell{
    background-color: #fff;
}
.list_content{
    flex-direction: row;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
}
.list_content_first{
    width: 500px;
    color: #666;
    font-size: 30px;
    margin-bottom: 10px;
}
.list_content_img{
    height: 200px;
    width: 240px;
    margin-right: 10px;
}
.list_content_two{
    flex-direction: row;
    margin-top: 20px;
    margin-bottom: 20px;
}
.list_content_third{
    flex-direction: row;
}
.list_content_button{
    flex-direction: row;
    justify-content: flex-end;
    width: 710px;
}
.right_left{
    position: absolute;
    flex-direction: row;
    width: 750px;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    bottom: 180px;
}
.right_icon, .left_icon{
    font-size: 30px;
    color: #f0f0f0;
}
.wxc_button_third {
    border-style: solid;
    border-width: 2px;
    /*border-color: #f2061a;*/
    border-radius: 5px;
    width: 200px;
    margin-left: 20px;
}
.list_content_two1{
    color: #666;
    font-size: 26px;
    padding-left: 20px;
    padding-right: 20px;
}
.list_content_two2{
    color: #666;
    font-size: 26px;
    padding-left: 20px;
    padding-right: 20px;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: #666;
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #666;
}
.list_content_third_price{
    font-size: 30px;
    color: #ff2d2d;
    margin-left: 20px;
    margin-right: 40px;
}
.active_area{
    position: fixed;
    background-color: #fff;
    padding-top: 50px;
    width: 750px;
    top: 0px;
    align-items: center;
}
.bargain_rink{
    /*flex-direction: row;*/
    /*align-items: center;*/
    margin-top: 10px;
    margin-bottom: 10px;
    border:1px;
    height: 100px;
    border-bottom-width:1px;
    border-color: #e0e0e0;
    justify-content: center;
    margin-left: 10px;
}
.bargain_rink_face{
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
.bargain_rink_name{
    margin-right: 10px;
    width: 180px;
}
.bargain_num{
    flex-direction: row;
    margin-left: 10px;
    margin-bottom: 10px;
}
.bargain_num1{
    flex-direction: row;
    height: 60px;
    color: #1E90FF;
    margin-left: 10px;
    margin-right: 20px;
}
.bargain_num2{
    margin-right: 60px;
    margin-bottom: 3px;
    border:1px;
    height: 100px;
    border-bottom-width:1px;
    border-color: #e0e0e0;
}
.progress{
    border-style: solid;
    border-width: 1px;
    border-color: #1E90FF;
}

.border-cell {
    background-color: #f2f3f4;
    width: 750px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-bottom-width: 1px;
    border-style: solid;
    border-color: #e0e0e0;
}
.cell{
    background-color: #fff;
}
.content{
    flex-direction: row;
    height: 280px;
    border-bottom-width:1px;
    border-color: #e0e0e0;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}
.content_first{
    width: 500px;
    color: #666;
    font-size: 28px;
    margin-bottom: 10px;
}
.content_img{
    height: 200px;
    width: 240px;
    margin-right: 10px;
    margin-left: 10px;
}
.content_two{
    flex-direction: row;
    margin-top: 20px;
    margin-bottom: 20px;
}
.content_third{
    flex-direction: row;
}
.content_two1{
    color: #666;
    font-size: 26px;
    padding-left: 20px;
    padding-right: 20px;
}
.content_two2{
    color: #666;
    font-size: 26px;
    padding-left: 20px;
    padding-right: 20px;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: #666;
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #666;
}
.content_third_price{
    font-size: 30px;
    color: #ff2d2d;
    margin-left: 20px;
    margin-right: 40px;
}
.content_four{
    /*width: 520px;*/
    flex-direction: row;
    justify-content: space-around;
    padding-top: 5px;
    padding-right: 5px;

}
.content_four_text{
    font-size: 25px;
    color: #666;
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    margin-right: 5px;
}
.item-container {
    width: 750px;
    background-color: #f2f3f4;
}
.cellBrand{
    width: 750px;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.list_cont{
    height: 100px;
    margin-left: 20px;
    flex-direction: row;
    align-items: center;
}
.order_pop{
    position: fixed;
    background-color: #fff;
    height: 800px;
    width: 550px;
    top: 200px;
    left: 100px;
    /* align-items: center; */
}
.order_pop_title{
    height: 100px;
    line-height: 100px;
    font-size: 40px;
    text-align: center;
}
.order_pop_content{
    flex-direction: row;
    height: 80px;
    align-items: center;
}
.order_pop_text1{
    color: #666;
    font-size: 36px;
    width: 300px;
    text-align: right;
}
.order_pop_text2{
    color: #666;
    font-size: 36px;
}
.order_pop_button{
    flex-direction: row;
    height: 130px;
    justify-content: space-around;
    align-items: flex-end;
}
.order_pop_cencel{
    font-size: 40px;
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 8px;
    width: 140px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.order_pop_pay{
    font-size: 40px;
    background-color: #1E90FF;
    color: #fff;
    border-radius: 8px;
    width: 140px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
/* 左侧弹窗 */
.morecarWrap{
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:30px;
    margin-bottom: 20px;
}
.morecar{
    display:flex;
    width:300px;
    align-items: center;
    padding:20px 0px;
    border-color:#1E90FF;
    border-width:1px;
    border-style:solid;
    border-radius:10px;
}
.morecartxt{
    font-size:30px;
    color:#1E90FF;

}
.background_bg{
    position: fixed;
    left: 0px;
    top: 0px;
    height: 1334px;
    width: 750px;
    background-color: #ededed;
}
.ball {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #fff;
    /* margin: 48px; */
    position:absolute;
    right:8px;
    bottom:68px;
    box-shadow: 0 0 15px #1E90FF;
    padding:10px;
}
.ball_img{
    width: 80px;
    height: 80px;
}
.iconfontStyle1 {
    font-size: 70px;
    text-align:center;
    color: #1E90FF;

}
.rule_content{
    background-color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
}
.bargain_list{
    text-align:center;
    font-size: 30px;
    margin-bottom: 20px;
}
.bargain_rule{
    text-align:center;
    color: #707070;
    font-size: 30px;
    margin-bottom: 20px;
}
.rule_content_word {
    color: #707070;
    font-size: 24px;
    margin-bottom: 8px;
}
.userSelf{
    color:red;
}
</style>
